<template>
  <div class="dialogDetailOrder">
       <el-dialog
        title="订单核销"
        :visible.sync="dialogData.dialogVisible"
        :close-on-click-modal="false"
        width="500px"
      >
        <p class="topFont">*请确认客户已到店入住再操作核销</p>
        <div class="nav">
            <p>操作订单核销需要完成身份信息校验</p>
            <p v-if="flagCode==1">系统已向你的{{phoneCode}}手机号发送一条验证码，请输入以完成校验</p>
            <div class="setInter clearfloat">
              <span>验证码</span>
              <el-input class="codeInput" v-model="code"></el-input>
              <div class="sumit" @click="sumitHandle">提交</div>
              <div class="getCode" v-if="flagCode!=1" @click="getCodeHandle">{{font}}</div>
              <div class="getCode getCodeSec" v-if="flagCode==1">{{font}}</div>
            </div>
            <p class="codeError" v-if="codeError">{{message}}</p>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import api from "@/fetch/url";
import { setInterval, clearInterval } from 'timers';
export default {
  props:["dialogData","id"],
  data() {
    return {
      phoneCode:"",
      code:"",
      font:"获取验证码",
      flagCode:0,
      index:60,
      time:"",
      codeError:false,
      message:""
    }
  },
  created() {
       
  },
  computed: {
    
  },
　mounted() {
     
  },
  methods: {
    //点击提交按钮
    sumitHandle(){
        if(this.code.length==0){
             this.$message({
                message: "请输入验证码",
                type: "error",
             });
            return false;
         }
         //点击核销
         api.clinchSumit({
            },this.id-0,this.code).then(json => {
                if(json.code==-1){
                    this.message=json.message;
                    this.$message({
                        message: json.message,
                        type: "error",
                    });
                    this.codeError=true;
                }else {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    });
                    this.codeError=false;
                    setTimeout(()=>{
                       this.$emit("writeOffFlaseFun");
                    },2000);
                }
            })
    },
    //点击获取验证码 
    getCodeHandle(){

      if(this.flagCode==0||this.flagCode==2){
         //调用获取验证码接口  refundCaptcha
            api.clinchCaptcha({},
                this.id-0
            ).then(json => {
                this.phoneCode=json;
                this.flagCode=1;
                this.font="重新获取("+this.index+")";
                this.time=setInterval(()=>{
                    this.index--;
                    this.font="重新获取("+this.index+")";
                    if(this.index<=0){
                      this.flagCode=2;
                      this.index=60;
                      this.font="重新获取";
                      clearInterval(this.time);
                    }
                },1000);
            })
            
          
      }
    },
     sureBtn(){

     }
  }
}
</script>
<style lang="scss">
.dialogDetailOrder .el-dialog__body {
   padding:0;
   .codeInput .el-input__inner {
     height:36px;
     line-height: 36px;
   }
} 
</style>
<style lang="scss" scoped>
.dialogDetailOrder .el-dialog__body {
   .topFont {
     padding:0 20px 20px 20px;
     box-sizing: border-box;
     border-bottom: 1px solid #E9E9E9;
     font-size: 14px;
     color: #FC612A;
   }
   .nav {
     padding:20px 30px;
     box-sizing: border-box;
     p {
       font-size: 14px;
        color: #777777;
        letter-spacing: 0;
        line-height: 24px;
     }
     .setInter {
       padding:20px 0 0 0;
       box-sizing:border-box;
       span {
         float: left;
         height:36px;
         line-height:36px;
         font-size: 14px;
         color: #262626;
       }
       .codeInput {
         float: left;
         width:140px;
         margin-left:10px;
       }
       .sumit,.getCode {
         float: left;
         width:96px;
         height:36px;
         background: #FC612A;
         border-radius: 4px;
         line-height:36px;
         text-align:center;
         color:#fff;
         font-size: 14px;
         margin-left:12px;
         cursor: pointer;
       }
       .getCode {
         width:116px;
       }
       .getCodeSec {
         font-size: 14px;
         color: #777777;
         background: #F1F1F1;
       }
     }
     .codeError {
       padding:10px 50px 20px 50px;
       font-size: 14px;
       color: #FC612A;
     }
   }
}
</style>